	<template>
		<view class="container">
			<!-- <image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/lights.png" mode="widthFix" class="lights flickering-image"></image> -->
			<view class="page page4">

				<view class="topper">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/logo.png" mode="widthFix"
						class="logo"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/title4.png" mode="widthFix"
						class="text"></image>
				</view>
				<view class="main">
					<!-- <image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/turntable.png" mode="widthFix" class="photo-box" @click="onMethodOpen">
					</image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/arrow.png" mode="widthFix" class="arrow"></image> -->
					<q-turntable ref="turntable" @start="turntableStart" @success="turntableSuccess"></q-turntable>
					<uni-popup ref="formRef" type="center" mask-background-color="rgba(0,0,0,0.6)">
						<view class="form-wrapper">
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/form-box.png" mode="widthFix"
								class="form-box"></image>
							<view class="award-text">
								{{prize_name}}
							</view>
							<view class="form">
								<view class="form-item">
									<text class="form-label">收件人</text>
									<input type="text" :value="form.receiver_name" class="form-input"
										@input="onInput('receiver_name', $event.target.value)">
								</view>
								<view class="form-item">
									<text class="form-label">手机号码</text>
									<input type="tel" :value="form.phone" class="form-input"
										@input="onInput('phone', $event.target.value)">
								</view>
								<view class="form-item">
									<text class="form-label">收货地址</text>
									<textarea class="form-input textarea" rows :value="form.address"
										@input="onInput('address', $event.target.value)"></textarea>
								</view>

							</view>
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/submit-btn.png"
								mode="widthFix" class="single-btn" @click="formSubmit">
							</image>
						</view>
					</uni-popup>
					<uni-popup ref="successRef" type="center" mask-background-color="rgba(0,0,0,0.8)">
						<view class="success-wrapper">
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/success-box.png"
								mode="widthFix" class="success-box"></image>
							<view class="btns">
								<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/got-btn.png"
									mode="widthFix" class="single-btn" @click="close">
								</image>
								<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/invite-btn.png"
									mode="widthFix" class="single-btn" @click="invite">
								</image>
							</view>
						</view>
					</uni-popup>
					<uni-popup ref="failRef" type="center" mask-background-color="rgba(0,0,0,0.8)">
						<view class="success-wrapper">
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/fail-box.png" mode="widthFix"
								class="success-box"></image>
							<view class="btns">
								<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/sure-btn.png"
									mode="widthFix" class="single-btn" @click="close">
								</image>
								<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/invite-btn.png"
									mode="widthFix" class="single-btn" @click="invite">
								</image>
							</view>
						</view>
					</uni-popup>
					<uni-popup ref="formRef2" type="center" mask-background-color="rgba(0,0,0,0.8)">
						<view class="form-wrapper">
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/form-box.png" mode="widthFix"
								class="form-box"></image>
							<view class="award-text">
								{{prize_name}}
							</view>
							<view class="form">
								<view class="form-item">
									<text class="form-label">收件人</text>
									<input type="text" :value="form.receiver_name" class="form-input"
										:disabled="awardInfo?.address"
										@input="onInput('receiver_name', $event.target.value)">
								</view>
								<view class="form-item">
									<text class="form-label">手机号码</text>
									<input type="tel" :value="form.phone" class="form-input" :disabled="awardInfo?.address"
										@input="onInput('phone', $event.target.value)">
								</view>
								<view class="form-item">
									<text class="form-label">收货地址</text>
									<textarea class="form-input textarea" rows :value="form.address"
										:disabled="awardInfo?.address"
										@input="onInput('address', $event.target.value)"></textarea>
								</view>

							</view>
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/close-btn.png" mode="widthFix"
								class="close-btn" @click="closeForm2" v-if="awardInfo?.address">
							</image>
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/submit-btn.png"
								mode="widthFix" class="single-btn" @click="formSubmit" v-else>
							</image>
						</view>
					</uni-popup>



				</view>
				<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/draw-btn.png" mode="widthFix"
					class="single-btn" @click="turntableStart"></image>
			</view>
			<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/music.png" mode="widthFix"
				class="music p-absolute" :class="{paused : !play}" @click="tabMusic"></image>
			<view class="nav p-absolute">
				<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/my-award.png" mode="widthFix"
					@click="openAward"></image>
				<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/rule.png" mode="widthFix"
					@click="openRule"></image>
				<uni-popup ref="ruleRef" type="center" mask-background-color="rgba(0,0,0,0.8)">
					<view class="rule-container">
						<view class="rule-box">
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/rule-box.png" mode="widthFix"
								class="rule-bg"></image>
							<view class="rule-wrapper">
								<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/rule-text2.png"
									mode="widthFix" class="rule-text"></image>
							</view>
						</view>
						<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/close-btn.png" mode="widthFix"
							class="close-btn" @click="closeRule">
						</image>
					</view>
				</uni-popup>
			</view>

			<uni-popup ref="shareRef" type="center" mask-background-color="rgba(0,0,0,0.8)">
				<view class="share-box">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/share-cover.png" mode="widthFix"
						class="share-img">
					</image>
				</view>
			</uni-popup>


		</view>
	</template>

	<script>
		import request from "../../common/request";
		import cities from "../../static/cities.json";
		export default {
			data() {
				return {
					hasChance: false,
					userId: "",
					form: {
						receiver_name: "",
						phone: "",
						address: ""
					},
					checked: false,
					play: true,
					award: 1,
					awardList: [{
							title: '星巴克卡'
						},
						{
							title: '腾讯季卡'
						},
						{
							title: '巧克力'
						},
						{
							title: '爱奇艺半年卡'
						},
						{
							title: '谢谢参与'
						},
						{
							title: '红包封面'
						}
					],
					msg: '',
					back: {
						1: 4,
						2: 3,
						3: 5,
						4: 1,
						5: 0,
						6: 2
					},
					remaining_chances: 0,
					awardInfo: getApp().globalData.award,
					prize_name: ""
				}
			},
			onShareAppMessage() {
				return {
					title: 'V3贺岁 缘分加倍',
					path: '/pages/index/index', // 分享的路径，可以是当前页面，也可以是其他页面
					imageUrl: 'https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/share-cover2.png', // 可选的分享图标
					success: function(res) {
						// 用户确认分享后执行的回调函数
						console.log('分享成功', res);
					},
					fail: function(err) {
						// 用户取消分享后执行的回调函数
						console.log('分享失败', err);
					}
				};
			},
			onShareTimeline() {
				return {
					title: 'V3贺岁 缘分加倍',
					query: '/pages/index/index', // 自定义参数，可以在页面 onLoad 方法中通过 options 参数获取
					imageUrl: 'https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/share-cover2.png', // 分享的图片
					success: function(res) {
						// 用户确认分享后执行的回调函数
						console.log('分享到朋友圈成功', res);
					},
					fail: function(err) {
						// 用户取消分享后执行的回调函数
						console.log('分享到朋友圈失败', err);
					}
				};
			},
			onLoad() {

			},
			onShow() {

				this.play = getApp().globalData.play;
				this.userId = getApp().globalData.user_id;
				this.getChances();
				console.log(this.awardInfo, getApp().globalData.award)
				if (this.awardInfo.address) {
					this.form = this.awardInfo.address;
				}
				if (this.awardInfo.records && this.awardInfo.records.length > 0) {
					this.prize_name = this.awardInfo.records[0].prize_name;
					console.log(this.prize_name)
				}
				console.log(3, this.remaining_chances)
			},
			methods: {
				invite() {
					this.$refs.shareRef.open('center');
					return
				},
				getChances() {
					request("/gyapi/lottery/chances", "GET", {
						user_id: this.userId
					}).then(res => {
						console.log(res)
						this.remaining_chances = res.remaining_chances;
						console.log(2, this.remaining_chances)
						this.hasChance = !!res.remaining_chances;
						uni.showToast({
							title: `今日剩余${res.remaining_chances}次机会`,
							icon: 'none'
						})
					})
				},
				draw() {
					request("/gyapi/lottery/draw", "POST", {
						user_id: this.userId,
						source: 'main'
					}).then(res => {
						if (res.success) {
							console.log(0, this.remaining_chances)
							this.remaining_chances = this.remaining_chances - 1;
							console.log(1, this.remaining_chances)
							this.award = this.back[res.data.prize_id]
							console.log(this.award, res.data.prize_id)
							this.msg = res.data.description;
							this.prize_name = res.data.prize_name;
							this.$refs.turntable.begin(this.award + 1);
						}
					})
				},
				onInput(field, value) {
					this.form[field] = value;
					console.log(field, value)
				},
				closeForm() {
					this.$refs.formRef.close();
					this.$refs.successRef.open('center');
				},
				closeForm2() {
					this.$refs.formRef2.close();
				},
				close() {
					this.$refs.successRef.close();
					this.$refs.failRef.close();
				},
				formSubmit: function(e) {
					if (!(this.form.receiver_name && this.form.phone && this.form.address)) {
						uni.showToast({
							title: '请不全信息',
							icon: "error"
						})
						return
					} else if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
						uni.showToast({
							title: "请正确填写手机号",
							icon: "error"
						})
						return;
					}
					const that = this;
					uni.showModal({
						title: "提示",
						content: "提交后不可修改，确认提交吗？",
						success: function(res) {
							if (res.confirm) {
								console.log({
									user_id: that.userId,
									address: that.form
								})
								request('/gyapi/address/info', 'POST', {
									user_id: that.userId,
									address: that.form
								}).then(res => {
									that.$refs.formRef.close();
									that.$refs.successRef.open('center');
									that.awardInfo.address = that.form;
								}).catch(err => {
									uni.showToast({
										title: "异常，请重试",
										icon: "error"
									})
									console.error(err)
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "再想想",
									icon: "none"
								})
							}
						}
					})

					console.log('form发生了submit事件，携带数据为：' + JSON.stringify(this.form))

				},
				// 用户点击开始抽奖
				turntableStart() {
					console.log(4, this.remaining_chances)
					console.log(this.remaining_chances)
					if (!this.remaining_chances) {
						uni.showToast({
							title: `请明日再来！`,
							icon: 'none'
						})
						return;
					}
					this.draw();
				},

				// 抽奖完成后操作
				turntableSuccess() {
					console.log('bind:success', this.award);
					if (this.award === 4) {
						this.$refs.failRef.open('center')
					} else if (this.award === 5) {
						wx.showRedPackage({
							url: this.msg,
							success() {
								uni.showToast({
									title: "请点击领取",
									icon: "none"
								})
							},
							fail(err) {
								uni.showToast({
									title: "异常！",
									icon: "none"
								})
								console.error(err)
							}
						})
					} else {
						this.$refs.formRef.open('center')
					}
					// uni.showToast({
					// 	title: `${this.msg}`,
					// 	icon: 'none'
					// });
				},
				openAward() {
					if (this.prize_name) {
						this.$refs.formRef2.open("center");
					} else {
						uni.showToast({
							title: "暂无奖品，请再接再厉！",
							icon: "none"
						})
					}
				},
				tabMusic() {
					const app = getApp()
					if (this.play) {
						app.globalData.bgMusic.pause()
						app.globalData.bgMusic.status = 'pause'
					} else {
						app.globalData.bgMusic.play()
						app.globalData.bgMusic.status = 'play'
					}
					this.play = !this.play;
				},
				open() {
					this.$refs.popup.open('bottom')
				},
				jumpToProtocol() {
					uni.navigateTo({
						url: '/pages/protocol/protocol'
					})
				},
				jumpToNext(check = true) {
					if (check) {
						if (this.checked) {
							console.log("next")
						} else {
							this.open()
						}
					} else {
						console.log("next")
					}

				},
				openRule() {
					this.$refs.ruleRef.open('center')
				},
				closeRule() {
					this.$refs.ruleRef.close()
				}
			}
		}
	</script>

	<style lang="scss">
		.btns {
			display: flex;
			width: 750upx;
			justify-content: space-around;
			margin-bottom: 100upx;

			.btn {
				width: 40%;
			}
		}

		.custom-checkbox {
			display: inline-block;
			cursor: pointer;
			user-select: none;
			margin-right: 12upx;
		}

		.hidden-checkbox {
			/* 隐藏实际的 checkbox */
			display: none;
		}

		.checkbox-icon {
			width: 30upx;
			height: 30upx;
			border: 1px solid #FFCC33;
			/* 设置边框颜色 */
			border-radius: 4px;
			background-color: transparent;
			/* 设置背景颜色 */
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;
		}

		.checkbox-icon.checked::before {
			content: '\2714';
			/* 对号标记 */
			color: #FFCC33;
			/* 对号颜色 */
			font-size: 14px;
		}

		.single-btn {
			width: 380upx;
			margin-bottom: 100upx;
		}

		.container {
			.page {
				background: url("https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/bg.jpg") no-repeat center top / cover;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				position: relative;
				height: 100vh;
				width: 100%;
				overflow: hidden;

				&.page {
					.topper {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 90upx;

						.logo {
							width: 200upx;
							// animation: bounceIn 2s infinite;

						}

						.title1 {
							width: 280rpx;
							margin-top: 60rpx;
							animation: flipInX 1.5s infinite;
							// animation-delay: 0.5s;
						}

						.title2 {
							width: 560rpx;
							margin-top: 40rpx;
							// animation: flipInX 1.5s infinite;
						}
					}


				}

				.success-wrapper {
					display: flex;
					flex-direction: column;
					align-items: center;

					.success-box {
						width: 750upx;
					}

					.btns {
						flex-direction: column;
						align-items: center;

						.single-btn {
							margin: 20upx auto;
						}
					}
				}

				.form-wrapper {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;

					.close-btn {
						width: 50upx;
					}

					.form-box {
						width: 750upx;
					}

					.award-text {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						top: 230upx;
						color: #fff;
						width: 350upx;
						text-align: center;
						padding-bottom: 20upx;
						border-bottom: 1px solid #FFCC33;
					}

					.form {
						width: 460upx;
						position: absolute;
						top: 390upx;
						left: 50%;
						transform: translateX(-50%);

						.form-item {
							margin: 20upx auto;
							display: flex;
							justify-content: center;

							.form-label {
								width: 150upx;
								color: #f6c3b3;
								flex-shrink: 0;
								text-align: right;
								margin-right: 20upx;
							}

							.form-input {
								background-color: #f6c3b3;

								&.textarea {
									height: 120upx;
								}
							}

						}
					}
				}

				&.page4 {
					.topper {
						.text {
							width: 600upx;
							margin-top: 120upx;
							// animation: fadeInDown 1.5s infinite;
						}
					}

					.main {
						width: 600upx;

						.arrow {
							width: 200upx;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -30%);
							;
						}
					}

					.press-btn {
						margin-bottom: 100upx;
					}
				}



			}


			.rule-container {
				display: flex;
				flex-direction: column;
				align-items: center;

				.rule-box {
					position: relative;

					.rule-wrapper {
						position: absolute;
						top: 80upx;
						left: 0;
						padding: 0 40upx;
						width: calc(100% - 80upx);
						height: calc(100% - 100upx);
						overflow-y: scroll;
						overflow-x: hidden;

						.rule-text {
							width: 100%;
						}
					}

				}

				.close-btn {
					width: 50upx;
					margin: 40upx auto;
				}
			}



			.agree-box {
				background-color: #fef3de;
				padding: 60upx;
				box-sizing: border-box;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 90%;
				margin: 0 5%;
				border-radius: 40upx;

				.text-4 {
					width: 400upx;
				}

				.protocol-link {
					width: 320upx;
					margin: 30upx auto;
				}

				.agree-btn {
					width: 580upx;
				}

				.close-btn2 {
					position: absolute;
					width: 50upx;
					right: 20upx;
					top: 20upx;
				}
			}

			.lights {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
			}


			.music {
				width: 80upx;
				height: 80upx;
				right: 30upx;
				top: 170upx;
				animation: rotate 5s linear infinite;
				animation-play-state: running;

				&.paused {
					animation-play-state: paused;
				}

			}

			.nav {
				width: 150upx;
				top: 220upx;
				left: -10upx;

				&>image {
					width: 100%;
					margin-bottom: 40upx;
				}
			}

		}

		/* 定义闪烁动画 */
		@keyframes flicker {

			0%,
			19%,
			21%,
			23%,
			25%,
			54%,
			56%,
			100% {
				opacity: 0.5;
				/* 完全可见 */
			}

			20%,
			24%,
			55% {
				opacity: 0.2;
				/* 几乎不可见 */
			}
		}

		/* 应用闪烁动画到图片 */
		.flickering-image {
			animation: flicker 10s infinite;
			/* 动画持续2秒，无限循环 */
		}


		@-webkit-keyframes rotate {
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}

			100% {
				-webkit-transform: rotate(360deg);
				/* 或者 rotate(60deg)，效果相同 */
				transform: rotate(360deg);
				/* 或者 rotate(60deg)，效果相同 */
			}
		}

		@keyframes rotate {
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}

			100% {
				-webkit-transform: rotate(360deg);
				/* 或者 rotate(60deg)，效果相同 */
				transform: rotate(360deg);
				/* 或者 rotate(60deg)，效果相同 */
			}
		}
	</style>